import 'package:flutter/material.dart';
import 'package:flutter_study_app/widget/grid_select_button_view.dart';
import 'package:flutter_study_app/widget/my_app_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_study_app/widget/select_button.dart';
import 'package:signature/signature.dart';

class CheckVisitRecordPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CheckVisitRecordPageState();
}

class _CheckVisitRecordPageState extends State<CheckVisitRecordPage> {
  List<String> _checkWayList = [
    '调阅签购单',
    '调阅销售凭证',
    '采集现场照片或影像',
    '现场对受理终端或商户端码牌进行测试'
  ];
  List<String> _checkedWayList = [];

  List<String> _radioItems = ['正常', '异常'];

  final SignatureController _controller = SignatureController(
    penStrokeWidth: 2,
    penColor: Colors.red,
    exportBackgroundColor: Colors.blue,
    onDrawStart: () => print('onDrawStart called!'),
    onDrawEnd: () => print('onDrawEnd called!'),
  );

  _buildCheckWayView() {
    double screenW = MediaQuery.of(context).size.width;
    double w1 = screenW - 24.w;
    double w2 = (w1 - 12.w) / 2;

    int i = 0;
    List<Widget> itemList = _checkWayList.map((e) {
      String itemValue = _checkWayList[i];
      Widget item = Container(
        height: 36.w,
        width: i < 2 ? w2 : w1,
        child: SelectButton(
          text: itemValue,
          isSelected: _checkedWayList.contains(itemValue),
          onTap: () {
            if (_checkedWayList.contains(itemValue)) {
              _checkedWayList.remove(itemValue);
            } else {
              _checkedWayList.add(itemValue);
            }
            setState(() {});
          },
        ),
      );
      i++;
      return item;
    }).toList();

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 12.w, vertical: 16.w),
      child: Wrap(
        spacing: 12.w,
        runSpacing: 12.w,
        children: itemList,
      ),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        title: '检查内容记录',
        showDivider: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Container(
                color: Colors.white,
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.all(12.w),
                      child: Container(
                        padding: EdgeInsets.only(
                            left: 14.w, right: 14.w, top: 16.w, bottom: 16.w),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8.w),
                            color: Color(0xFFE1F4EE)),
                        height: 135.w,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '商户的名字内容',
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                  color: Color(0xFF104B42), fontSize: 18.sp),
                            ),
                            SizedBox(
                              height: 12.w,
                            ),
                            Row(
                              children: [
                                Image.asset(
                                  'assets/images/ic_user_green.png',
                                  width: 16.w,
                                  height: 16.w,
                                ),
                                SizedBox(
                                  width: 5.w,
                                ),
                                Text(
                                  '李大钊',
                                  style: TextStyle(
                                    color: Color(0xFF104B42),
                                  ),
                                ),
                                Spacer(),
                                Image.asset(
                                  'assets/images/ic_user_telephone.png',
                                  width: 16.w,
                                  height: 16.w,
                                ),
                                SizedBox(
                                  width: 5.w,
                                ),
                                Text(
                                  '0731-87878787',
                                  style: TextStyle(
                                    color: Color(0xFF104B42),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 4.w,
                            ),
                            Row(
                              children: [
                                Image.asset(
                                  'assets/images/ic_user_phone.png',
                                  width: 16.w,
                                  height: 16.w,
                                ),
                                SizedBox(
                                  width: 5.w,
                                ),
                                Text(
                                  '12345678901',
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                      color: Color(0xFF104B42),
                                      fontSize: 14.sp),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 4.w,
                            ),
                            Row(
                              children: [
                                Image.asset(
                                  'assets/images/ic_address_green.png',
                                  width: 16.w,
                                  height: 16.w,
                                ),
                                SizedBox(
                                  width: 5.w,
                                ),
                                Expanded(
                                  child: InkWell(
                                    onTap: () {},
                                    child: Row(
                                      children: [
                                        Expanded(
                                          child: Text(
                                            '湖南省株洲市茶陵县上合村村口村口村口村1231231231312312312321312eqweqweqweqweqw',
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: TextStyle(
                                                color: Color(0xFF104B42),
                                                fontSize: 14.sp),
                                          ),
                                        ),
                                        SizedBox(
                                          width: 4.w,
                                        ),
                                        Image.asset(
                                          'assets/images/ic_arrow_right.png',
                                          width: 16.w,
                                          height: 16.w,
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    //检查方式
                    Container(
                      padding: EdgeInsets.all(
                        12.w,
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            width: 3.w,
                            height: 14.w,
                            decoration: BoxDecoration(
                              color: Color(0xFF009669),
                              borderRadius: BorderRadius.circular(2.w),
                            ),
                          ),
                          SizedBox(
                            width: 16.w,
                          ),
                          Text(
                            '检查方式（可多选）',
                            style: TextStyle(
                                color: Color(0xFF333333), fontSize: 16.sp),
                          )
                        ],
                      ),
                    ),
                    Container(
                      height: 1.w,
                      color: Color(0xFFF5F4F3),
                      margin: EdgeInsets.only(left: 12.w, right: 12.w),
                    ),
                    _buildCheckWayView(),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    //现场检查情况
                    Container(
                      padding: EdgeInsets.all(
                        12.w,
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            width: 3.w,
                            height: 14.w,
                            decoration: BoxDecoration(
                              color: Color(0xFF009669),
                              borderRadius: BorderRadius.circular(2.w),
                            ),
                          ),
                          SizedBox(
                            width: 16.w,
                          ),
                          Text(
                            '现场检查情况',
                            style: TextStyle(
                                color: Color(0xFF333333), fontSize: 16.sp),
                          )
                        ],
                      ),
                    ),
                    Container(
                      height: 1.w,
                      color: Color(0xFFF5F4F3),
                      margin: EdgeInsets.only(left: 12.w, right: 12.w),
                    ),
                    Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(
                          left: 12.w,
                          right: 12.w,
                          top: 16.w,
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '1、',
                              style: TextStyle(
                                  fontSize: 14.sp, color: Color(0xFF333333)),
                            ),
                            Expanded(
                              child: Text(
                                '受理终端是否运行正常、合规使用，是否违规安装信息盗录装置、存在故障或损坏等情况；是否存在移机问题；终端使用范围、安装地址、终端编号是否与签约协议及我行系统记录相符。',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              ),
                            ),
                          ],
                        )),
                    GridSelectButtonView(
                      padding: EdgeInsets.only(
                          left: 32.w, right: 32.w, top: 16.w, bottom: 16.w),
                      crossAxisCount: 2,
                      itemCount: 2,
                      fixedHeight: 36.w,
                      mainAxisSpacing: 12.w,
                      crossAxisSpacing: 12.w,
                      getItemText: (index) => _radioItems[index],
                      valueList: _radioItems,
                    ),
                    Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(
                          left: 12.w,
                          right: 12.w,
                          top: 16.w,
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '2、',
                              style: TextStyle(
                                  fontSize: 14.sp, color: Color(0xFF333333)),
                            ),
                            Expanded(
                              child: Text(
                                '是否存在其他异常情况',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              ),
                            ),
                          ],
                        )),
                    GridSelectButtonView(
                      padding: EdgeInsets.only(
                          left: 32.w, right: 32.w, top: 16.w, bottom: 16.w),
                      crossAxisCount: 2,
                      itemCount: 2,
                      fixedHeight: 36.w,
                      mainAxisSpacing: 12.w,
                      crossAxisSpacing: 12.w,
                      getItemText: (index) => _radioItems[index],
                      valueList: _radioItems,
                    ),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    //服务满意度
                    Container(
                      padding: EdgeInsets.all(
                        12.w,
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            width: 3.w,
                            height: 14.w,
                            decoration: BoxDecoration(
                              color: Color(0xFF009669),
                              borderRadius: BorderRadius.circular(2.w),
                            ),
                          ),
                          SizedBox(
                            width: 16.w,
                          ),
                          Text(
                            '服务满意度',
                            style: TextStyle(
                                color: Color(0xFF333333), fontSize: 16.sp),
                          )
                        ],
                      ),
                    ),
                    Container(
                      height: 1.w,
                      color: Color(0xFFF5F4F3),
                      margin: EdgeInsets.only(left: 12.w, right: 12.w),
                    ),
                    Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(
                          left: 12.w,
                          right: 12.w,
                          top: 16.w,
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '1、',
                              style: TextStyle(
                                  fontSize: 14.sp, color: Color(0xFF333333)),
                            ),
                            Expanded(
                              child: Text(
                                '感谢您的配合,您对我们的服务是否满意？ 若不满意，烦请留下您的宝贵意见！谢谢！',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              ),
                            ),
                          ],
                        )),
                    GridSelectButtonView(
                      padding: EdgeInsets.only(
                          left: 32.w, right: 32.w, top: 16.w, bottom: 16.w),
                      crossAxisCount: 2,
                      itemCount: 2,
                      fixedHeight: 36.w,
                      mainAxisSpacing: 12.w,
                      crossAxisSpacing: 12.w,
                      getItemText: (index) => _radioItems[index],
                      valueList: _radioItems,
                    ),
                    Container(
                      color: Colors.white,
                      padding: EdgeInsets.only(
                        left: 32.w,
                        right: 32.w,
                        bottom: 16.w,
                      ),
                      child: TextField(
                        scrollPadding: EdgeInsets.zero,
                        textAlign: TextAlign.start,
                        maxLines: 2,
                        decoration: InputDecoration(
                          isDense: true,
                          contentPadding: EdgeInsets.all(10.w),
                          hintText: '请输入异常内容',
                          hintStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF999999)),
                          labelStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF333333)),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4.w),
                              borderSide: BorderSide(
                                  width: 1.w, color: Color(0xFF009669))),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    //检查情况评价
                    Container(
                      padding: EdgeInsets.all(
                        12.w,
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            width: 3.w,
                            height: 14.w,
                            decoration: BoxDecoration(
                              color: Color(0xFF009669),
                              borderRadius: BorderRadius.circular(2.w),
                            ),
                          ),
                          SizedBox(
                            width: 16.w,
                          ),
                          Text(
                            '检查情况评价',
                            style: TextStyle(
                                color: Color(0xFF333333), fontSize: 16.sp),
                          )
                        ],
                      ),
                    ),
                    Container(
                      height: 1.w,
                      color: Color(0xFFF5F4F3),
                      margin: EdgeInsets.only(left: 12.w, right: 12.w),
                    ),
                    Container(
                      color: Colors.white,
                      padding: EdgeInsets.all(
                        16.w,
                      ),
                      child: TextField(
                        scrollPadding: EdgeInsets.zero,
                        textAlign: TextAlign.start,
                        maxLines: 2,
                        decoration: InputDecoration(
                          isDense: true,
                          contentPadding: EdgeInsets.all(10.w),
                          hintText: '请输入检查情况评价',
                          hintStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF999999)),
                          labelStyle: TextStyle(
                              fontSize: 14.sp, color: Color(0xFF333333)),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4.w),
                              borderSide: BorderSide(
                                  width: 1.w, color: Color(0xFF009669))),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4.w),
                            borderSide: BorderSide(
                                width: 1.w, color: Color(0xFFD8D8D8)),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      height: 12.w,
                      color: Color(0xFFF8F8F8),
                    ),
                    Container(
                      padding: EdgeInsets.all(15.w),
                      color: Colors.white,
                      child: InkWell(
                        onTap: () {},
                        child: Row(
                          children: [
                            Image.asset(
                              'assets/images/ic_check_no.png',
                              width: 20.w,
                              height: 20.w,
                            ),
                            SizedBox(
                              width: 8.w,
                            ),
                            Text(
                              '商户本人已知晓上述全部内容',
                              style: TextStyle(
                                  color: Color(0xFF333333), fontSize: 14.sp),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 15.w),
                      child: Row(
                        children: [
                          Expanded(
                            child: AspectRatio(
                              aspectRatio: 164 / 85,
                              child: Container(
                                decoration:
                                    BoxDecoration(color: Color(0xFFF7F7F7)),
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      margin:
                                          EdgeInsets.only(left: 8.w, top: 4.w),
                                      child: Text(
                                        '商户签名：',
                                        style: TextStyle(
                                            fontSize: 12.sp,
                                            color: Color(0xFF666666)),
                                      ),
                                    ),
                                    Container(
                                      child: Signature(
                                        controller: _controller,
                                        backgroundColor: Colors.transparent,
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ),
                          SizedBox(
                            width: 16.w,
                          ),
                          Expanded(
                            child: AspectRatio(
                              aspectRatio: 164 / 85,
                              child: Container(
                                decoration:
                                    BoxDecoration(color: Color(0xFFF7F7F7)),
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      margin:
                                          EdgeInsets.only(left: 8.w, top: 4.w),
                                      child: Text(
                                        '商户签名：',
                                        style: TextStyle(
                                            fontSize: 12.sp,
                                            color: Color(0xFF666666)),
                                      ),
                                    ),
                                    Container(
                                      child: Signature(
                                        controller: _controller,
                                        backgroundColor: Colors.transparent,
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      height: 20.w,
                      margin: EdgeInsets.only(top: 16.w),
                      color: Color(0xFFF8F8F8),
                    ),
                  ],
                ),
              ),
            ),
          ),
          SafeArea(
            child: Container(
              padding: EdgeInsets.all(12.w),
              width: double.infinity,
              height: 74.w,
              color: Colors.white,
              child: TextButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Color(0xff009868)),
                ),
                onPressed: () {},
                child: Text(
                  '提交',
                  style: TextStyle(color: Colors.white, fontSize: 18.sp),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
